<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style rel="stylesheet">
        body {
            font-family: sans-serif;
            font-size: 20px;
            padding: -15px auto !important;
        }
        img {
            margin: -10px 0 -5px -10px !important;
            width: 101.88%;
            height: 620px;
        }
        .loginM {
            width: 500px;
            height: 300px;
            margin: -525px auto !important;
            padding: 30px;
        }
        .inptM {
            width: 400px;
            height: 30px;
            padding: 5px 10px;
            font-size: 20px;
            margin: 5px 0 20px 41px;
            opacity: 0.7 !important;
        }
        .inptM:focus {
            box-shadow: 0 0 25px 5px #84faff;
        }
        .rounded {
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            border-radius: 5px;
        }
        div.checkbox {
            margin: -10px auto 5px;
        }
        input[type=checkbox] {
            margin: 0 0 20px 55px;
            border: 1px solid #fff;
            width: 20px;
            height: 20px;
            vertical-align: middle;
            position: relative;
            bottom: -9px;
            -webkit-opacity: 0.7 !important;
            -moz-opacity: 0.7 !important;
            -ms-opacity: 0.7 !important;
            opacity: 0.7 !important;
        }
        input[type=checkbox]:focus {
            box-shadow: 0 0 25px 5px #8ffaff;
        }
        label {
            color: #dbcfbf;
            cursor: pointer;
            display: inline-block;
        }
        .btn {
            -webkit-background: linear-gradient(#359bf0, #296393);
            -moz-background: linear-gradient(#359bf0, #296393);
            -ms-background: linear-gradient(#359bf0, #296393);
            background: linear-gradient(#359bf0, #296393);
            -webkit-opacity: 0.7 !important;
            -moz-opacity: 0.7 !important;
            -ms-opacity: 0.7 !important;
            opacity: 0.7 !important;
        }
        .btn:hover {
            -webkit-background: linear-gradient(#296393, #359bf0);
            -moz-background: linear-gradient(#296393, #359bf0);
            -ms-background: linear-gradient(#296393, #359bf0);
            /* Animation
            ==============================================================*/

            background: linear-gradient(#296393, #359bf0);
            cursor: pointer;
        }
        .animated {
            -webkit-animation-duration: 1.35s;
            animation-duration: 1.35s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
        .animated.hinge {
            /* bounceInDown
        ------------------------------------------------------------------*/

            -webkit-animation-duration: 2s;
            animation-duration: 2s;
        }
        @-webkit-keyframes bounceInDown {
            0% {
                opacity: 0;
                -webkit-transform: translateY(-2000px);
            }
            60% {
                opacity: 0.7;
                -webkit-transform: translateY(30px);
            }
            80% {
                -webkit-transform: translateY(-10px);
            }
            100% {
                -webkit-transform: translateY(0);
            }
        }
        @keyframes bounceInDown {
            0% {
                opacity: 0;
                transform: translateY(-2000px);
            }
            60% {
                opacity: 0.7;
                transform: translateY(30px);
            }
            80% {
                transform: translateY(-10px);
            }
            100% {
                transform: translateY(0);
            }
        }
        .bounceInDown {
            /* rollIn
        -----------------------------------------------------------------*/

            -webkit-animation-name: bounceInDown;
            animation-name: bounceInDown;
        }
        @-webkit-keyframes rollIn {
            0% {
                opacity: 0;
                -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
                transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
            }
            100% {
                opacity: 0.7;
                -webkit-transform: none;
                transform: none;
            }
        }
        @keyframes rollIn {
            0% {
                opacity: 0;
                -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
                transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
            }
            100% {
                opacity: 0.7;
                -webkit-transform: none;
                transform: none;
            }
        }
        .rollIn {
            /* fadeInRight
        -----------------------------------------------------------------*/

            -webkit-animation-name: rollIn;
            animation-name: rollIn;
        }
        @-webkit-keyframes fadeInRight {
            0% {
                opacity: 0;
                -webkit-transform: translate3d(100%, 0, 0);
                transform: translate3d(100%, 0, 0);
            }
            100% {
                opacity: 0.7;
                -webkit-transform: none;
                transform: none;
            }
        }
        @keyframes fadeInRight {
            0% {
                opacity: 0;
                -webkit-transform: translate3d(100%, 0, 0);
                transform: translate3d(100%, 0, 0);
            }
            100% {
                opacity: 0.7;
                -webkit-transform: none;
                transform: none;
            }
        }
        .fadeInRight {
            /* fadeInUpBig
            -----------------------------------------------------------*/

            -webkit-animation-name: fadeInRight;
            animation-name: fadeInRight;
        }
        @-webkit-keyframes fadeInUpBig {
            0% {
                opacity: 0;
                -webkit-transform: translate3d(0, 2000px, 0);
                transform: translate3d(0, 2000px, 0);
            }
            100% {
                opacity: 0.7;
                -webkit-transform: none;
                transform: none;
            }
        }
        @keyframes fadeInUpBig {
            0% {
                opacity: 0;
                -webkit-transform: translate3d(0, 2000px, 0);
                transform: translate3d(0, 2000px, 0);
            }
            100% {
                opacity: 0.7;
                -webkit-transform: none;
                transform: none;
            }
        }
        .fadeInUpBig {
            -webkit-animation-name: fadeInUpBig;
            animation-name: fadeInUpBig;
        }
    </style>

    <script src="../../jquery.js"></script>
    <script>
        $(document).ready(function() {
            $('body').css('background', 'url(/img/coffee.jpg)');
        });
    </script>
</head>
<body>
<div class="coffee-bg" style="width: 100%; height: 100%;">
    <img src="../H5/ani/img/coffee.jpg" width="1010px" height="630px" alt="coffee-bg">

    <div class="loginM">
        <form method="post" action="/Minora/AuthorizeR">
            <input class="inptM rounded animated bounceInDown" onkeyup="MyFunc(this)" type="text" name="Login" placeholder="Username" value="" maxlength="25">
            <!-- /Username -->

            <input class="inptM rounded animated rollIn" type="password" name="Password1" value="" placeholder="* * * * * * *" maxlength="25">
            <!-- /Password 1 -->

            <input class="inptM rounded animated fadeInRight" type="password" name="Password2" value="" placeholder="* * * * * * *" maxlength="25">
            <!-- /Password 2 -->

            <div class="checkbox animated fadeInUpBig">
                <input id="checkMe" class="checkbox" type="checkbox">
                <label for="checkMe">remember me</label>
            </div>
            <!-- /Checkbox -->

            <input class="btn rounded animated fadeInUpBig" type="submit" value="Login" style="width: 425px; height: 40px; margin-left: 40px; font-size:20px; color:#f2ecec; letter-spacing:2px;">
            <!-- /Login button -->
        </form>
    </div>
    <!-- /loginM -->
</div>
</body>
</html>
